<template>
  <div class="my-counter">
    <button @click="num--" type="button" class="btn btn-light">
      -
    </button>
    <input v-model.number="num" type="number" class="form-control inp" />
    <button @click="num++" type="button" class="btn btn-light">
      +
    </button>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  computed: {
    ...mapState(["list"]),
    num: {
      set(value) {
        if (value < 1) return this.$prompt.show('亲，不能小于1哦')
        this.$store.commit('val', {id: this.id, count: value})
      },
      get() {
        return this.list[this.list.findIndex((item) => item.id === this.id)]
          .goods_count;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn,
  .inp {
    transform: scale(0.9);
  }
}
</style>